<template>
    <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
// import tdTheme from "./theme.json"; // 引入默认主题
import resizeMixins from "@/utils/resizeMixins";
import henan from "../map/Henan";
export default {
    name: "echart",
    mixins: [resizeMixins],
    props: {
        className: {
            type: String,
            default: "chart",
        },
        isTrueclick: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: "chart",
        },
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "2.5rem",
        },
        options: {
            type: Object,
            default: () => ({}),
        },
        map: {
            type: Object,
            default: {},
        },
        addressList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        henanData: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            chart: null,
            mapdata: [],
            zoom: 0,
            center: [],
            data: [],
        };
    },
    // watch: {
    //   options: {
    //     handler(options) {
    //       this.initChart(this.map);
    //     },
    //     deep: true,
    //   },
    //   addressList: {
    //     handler(addressList) {
    //       console.log(addressList);
    //     },
    //     deep: true,
    //   },
    // },
    created() {
        setTimeout(() => {
            this.initChart(this.map);
            this.onclick();
        }, 1000);
    },
    methods: {
        initChart(map) {
            this.$echarts.registerMap(map.name, map.geo);
            this.chart = this.$echarts.init(this.$el, "tdTheme");
            this.chart.setOption(this.options, true);
            this.chart.on("georoam", this.onDatazoom);
        },
        onclick() {
            this.chart.on("click", (params) => {
                let city = {
                    郑州市: [113.665412, 34.757975, 20],
                    开封市: [114.341447, 34.797049, 20],
                    洛阳市: [112.434468, 34.663041, 20],
                    平顶山市: [113.307718, 33.735241, 20],
                    安阳市: [114.352482, 36.103442, 20],
                    鹤壁市: [114.295444, 35.748236, 20],
                    新乡市: [113.883991, 35.302616, 20],
                    焦作市: [113.238266, 35.23904, 20],
                    濮阳市: [115.041299, 35.768234, 20],
                    许昌市: [113.826063, 34.022956, 20],
                    漯河市: [114.026405, 33.575855, 20],
                    三门峡市: [111.194099, 34.777338, 20],
                    南阳市: [112.540918, 32.999082, 20],
                    商丘市: [115.650497, 34.437054, 20],
                    信阳市: [114.075031, 32.123274, 20],
                    周口市: [114.649653, 33.620357, 20],
                    驻马店市: [114.024736, 32.980169, 20],
                    济源市: [112.590047, 35.090378, 20],
                };

                for (let i in city) {
                    if (i == params.name) {
                        this.options.series[0].center = city[i];
                    }
                }
                let mapdata;
                for (let i in henan.children) {
                    if (henan.children[i].name == params.name) {
                        if (params.name != "济源市") {
                            mapdata = henan.children[i];
                            this.options.series[0].data = this.getCountydata(
                                params.name
                            );
                            this.$emit(
                                "getCountydata",
                                this.getTableData(params.name)
                            );
                            this.options.series[0].mapType = mapdata.name;
                            this.initChart(mapdata);
                        }
                        return;
                    } else {
                        mapdata = henan;
                        this.options.series[0].mapType = mapdata.name;
                        this.options.series[0].data = this.henanData;
                        this.$emit("getCountydata");
                        this.initChart(mapdata);
                    }
                }
            });
        },

        back() {
            this.options.series[0].mapType = henan.name;
            this.options.series[0].data = this.henanData;
            this.$emit("getCountydata");
            this.initChart(henan);
        },
        getCountydata(name) {
            if (this.addressList) {
                let list = [];
                this.addressList.map((res) => {
                    if (res.city == name) {
                        let a = {
                            name: res.count,
                            value: ((res.YYQ_SUM / res.ZBYE) * 100).toFixed(2),
                        };
                        list.push(a);
                    }
                });

                return list;
            } else {
                this.$message({
                    message: "数据加载中，请稍等！",
                    type: "warning",
                });
            }
        },
        getTableData(name) {
            if (this.addressList) {
                let list = [];
                this.addressList.map((res) => {
                    if (res.city == name) {
                        list.push(res);
                    }
                });
                list.sort(function (a, b) {
                    return b.YYQ_SUM / b.ZBYE - a.YYQ_SUM / a.ZBYE;
                });
                return list;
            }
        },

        onDatazoom() {
            let { zoom, center } = this.chart.getOption().series[0];
            this.zoom = zoom;
            this.center = center;
        },
    },
};
</script>

<style>
</style>
